<template>
  <div>
    <van-nav-bar :border="false" fixed title="历史红包" left-arrow @click-left="GOback" placeholder />
    <section class="hongbao_container">
      <li class="hongbao_list_li" v-for=" item in hbHistoryData" :key="item.id">
        <section class="list_item">
          <div class="list_item_left">
            <span>¥</span>
            <span>{{item.amount.toFixed(1)}}</span>
            <p>{{item.description_map.sum_condition}}</p>
          </div>
          <div class="list_item_right">
            <h4>{{item.name}}</h4>
            <p>{{item.end_date}}到期</p>
            <p>{{item.description_map.phone}}</p>
          </div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yiguoqi"></use>
          </svg>
        </section>
        <!-- v-if="item.limit_map" -->
        <footer class="list_item_footer" v-if="item.limit_map">
          <p>{{item.limit_map.restaurant_flavor_ids}}</p>
        </footer>
      </li>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['hbHistoryData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    }
  },
  mounted() {
    const id = window.sessionStorage.getItem('user_id')
    this.$store.dispatch('hbHistoryList', id)
  }
}
</script>

<style lang="less" scoped>
.hongbao_list_li {
  background-image: url('@/assets/img/guoqi.png');
  margin-top: 0.5rem;
}
.list_item_left span {
  color: #ccc;
}
.icon {
  width: 2.5rem;
  height: 2.5rem;
}
</style>